<script setup>
import { useUserStore } from '@/store/user'
import { updateUserPwdApi } from '@/api/login'
import { useWarehouseStore } from '@/store/warehouse'

const userStore = useUserStore()
const openModifyPassword = ref(false)
const title = import.meta.env.VITE_APP_TITLE
function handleCommand(command) {
    switch (command) {
        case "modifyPassword":
            modifyPassword()
            break
        case "logout":
            logout()
            break
    }
}

// 退出登录
function logout() {
    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        userStore.logout().then(() => {
            location.href = '/'
        })
    }).catch(() => { })
}

const { proxy } = getCurrentInstance()
const user = reactive({
    oldPassword: undefined,
    newPassword: undefined,
    confirmPassword: undefined
})

const equalToPassword = (rule, value, callback) => {
    if (user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}
const rules = ref({
    oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }]
    , newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }
        , { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
    ]
    , confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }
        , { required: true, validator: equalToPassword, trigger: "blur" }
    ]
})

// 修改密码
function modifyPassword() {
    user.value = {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
    }
    openModifyPassword.value = true
}

// 修改密码
function submitModifyPassword() {
    proxy.$refs.pwdRef.validate(valid => {
        if (valid) {
            updateUserPwdApi(user.oldPassword, user.newPassword).then(response => {
                proxy.$modal.msgSuccess("修改密码成功")
                openModifyPassword.value = false
            }).catch(err => { })
        }
    })
}
</script>

<template>
    <div class="basic-layout">
        <div class="nav-top">
            <div class="left">
                <h1 class="title">{{ title }}</h1>
                <el-menu :default-active="$route.path" mode="horizontal" :ellipsis="false" router>
                    <el-menu-item index="/purchase/in" v-hasPermi="['depot:purchase:in']">采购入库</el-menu-item>
                    <el-menu-item index="/inside/out" v-hasPermi="['depot:inside:out']">领料出库</el-menu-item>
                    <el-menu-item index="/inside/in" v-hasPermi="['depot:inside:in']">空瓶入库</el-menu-item>
                    <el-menu-item index="/purchase/out" v-hasPermi="['depot:purchase:out']">空瓶出库</el-menu-item>
                    <el-menu-item index="/other/in" v-hasPermi="['depot:other:in']">退料入库</el-menu-item>
                    <el-menu-item index="/other/out" v-hasPermi="['depot:other:out']">非生产领料出库</el-menu-item>
                    <el-menu-item index="/settings" v-hasPermi="['depot:settings']">设置仓库</el-menu-item>
                </el-menu>
            </div>
            <div class="right">
                <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
                    <div class="name">
                        {{ userStore.name }}
                        <el-icon><caret-bottom /></el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="modifyPassword">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <div class="warehouse">{{ useWarehouseStore().name }}</div>
            </div>
        </div>
        <div class="wrapper">
            <router-view class="main-page"></router-view>
        </div>
    </div>
    <el-dialog title="修改密码" v-model="openModifyPassword" width="500px">
        <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
            </el-form-item>
            <el-form-item>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitModifyPassword">保 存</el-button>
                <el-button type="danger" @click="openModifyPassword = false">关 闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="scss">
.basic-layout {
    position: relative;

    .nav-top {
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        padding: 0 20px;

        .left {
            display: flex;
            justify-content: left;
            align-items: center;

            .title {
                font-weight: 400;
                font-size: 26px;
                padding-right: 20px;
            }
        }

        .right {
            display: flex;
            justify-content: left;
            align-items: center;

            .right-menu-item {
                display: inline-block;
                padding: 0 8px;
                height: 100%;
                font-size: 18px;
                color: #5a5e66;
                vertical-align: text-bottom;

                .name {
                    line-height: 60px;
                }

                &.hover-effect {
                    cursor: pointer;
                    transition: background 0.3s;

                    &:hover {
                        background: rgba(0, 0, 0, 0.025);
                    }
                }
            }

            .warehouse {
                color: var(--el-menu-active-color)
            }
        }
    }

    .wrapper {
        background-color: #eef0f3;
        padding: 20px;
        height: calc(100vh - 60px);

        .main-page {
            background-color: #fff;
            height: 100%;
        }
    }
}
</style>